<template>
  <div class="payforpassw">
    <Card>
      <p slot="title">修改支付密码</p>
      <div class="passwForm">
        <Form ref="formInline" :model="formInline" :label-width="100" :rules="ruleInline">
          <FormItem prop="old_password" label="旧密码">
            <Input  type="password"  v-model="formInline.old_password" placeholder="请输入旧的支付密码"></Input>
          </FormItem>
          <FormItem prop="password" label="新密码">
            <Input  type="password" v-model="formInline.password" placeholder="请输入新的支付密码"></Input>
          </FormItem>
          <div class="text"> 支付密码为8-16位的字母和数字组合</div>
          <FormItem prop="againPassw" label="确认新密码">
            <Input  type="password" v-model="formInline.againPassw" placeholder="请输入确认密码"></Input>
          </FormItem>
          <FormItem>
            <Button  @click="save" class="com-btm mr-1">保存</Button>
            <Button  @click="gohome" class="com-btm ">返回</Button>
          </FormItem>
        </Form>
      </div>
    </Card>
  </div>

</template>
<script>
  import {merPayPw} from '@/api/user'
  // 关闭标签
  import { mapMutations } from 'vuex'
  export default {
    name: "payforpassw_page",

    data() {
      // 密码验证
      const pwdCheck = async (rule, value, callback) => {
        let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
        if (value.length < 8) {
          this.changeFlag = 2;
          return callback(new Error('密码不能少于6位！'));
        } else if (value.length > 16) {
          this.changeFlag = 2;
          return callback(new Error('密码最长不能超过16位！'));
        } else if (!reg.test(value)) {
          this.changeFlag = 2;
          return callback(new Error('密码输入有误，请检查格式是否正确！'));
        } else {
          this.changeFlag = 1;
          callback()
        }
      }
      // 重复密码验证
      const pwdAgainCheck = async (rule, value, callback) => {
        if (value.length < 1) {
          this.changeAgainFlag = 2;
          return callback(new Error('重复密码不能为空！'));
        } else if (this.formInline.password != this.formInline.againPassw) {
          this.changeAgainFlag = 2;
          return callback(new Error('两次输入密码不一致！'));
        } else {
          this.changeAgainFlag = 1;
          callback()
        }
      };
      return {
        changeFlag: 0,
        changeAgainFlag: 0,
        formInline: {
          uid:this.$store.state.user.userInfo.uid,
          old_password:'',
          password:'',
          againPassw: ''
        },
        ruleInline: {
          old_password: [{
            validator: pwdCheck,
            trigger: 'blur'
          }],
          password: [{
            validator: pwdCheck,
            trigger: 'blur'
          }],
          againPassw: [{
            validator: pwdAgainCheck,
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      ...mapMutations([
        'closeTag'
      ]),
      close () {
        this.closeTag({
          name: 'payforpassw_page'
        })
      },
      save() {
        this.$refs['formInline'].validate((valid) => {
          console.log(this.formInline)
          if (valid) {
            merPayPw(this.formInline).then(res=>{
              this.$Message.success(res.msg);
            }).catch(err=>{
               this.$Message.error(err.msg);
            })
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      gohome(){
        this.$router.push({
          name:'home'
        })
      }
    }
  }
</script>
<style lang="less">
  .payforpassw .ivu-card-head {
    position: relative;
    }
   .payforpassw .ivu-card-head::after {
      content: '';
      position: absolute;
      left: 10px;
      bottom: 0;
      width: 95px!important;
      border-bottom: 2px solid #5FB878;
  }
  .passwForm {
    width: 50%;
    margin: 0 auto;

    .ivu-form-item {
      min-height: 36px;
      font-size: 14px;
    }

    .text {
      margin-left: 100px;
      color: #999;
      margin-top: -15px;
      margin-bottom: 20px;
    }
  }
</style>
